<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol {
            list-style: none;
        }
        
        #lunbo {
            position: relative;
            width: 880px;
            height: 550px;
            border: 1px solid #333;
            margin: 20px auto;
        }
        
        #lunbo #pic li {
            position: absolute;
            left: 0;
            top: 0;
            width: 880px;
            height: 550px;
            display: none;
        }
        
        #lunbo #pic .current {
            display: block;
        }
        /* 按钮 */
        
        #lunbo #btn a {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            margin-top: -20px;
            background-color: rgba(255, 255, 255, 0.3);
            font: 20px/40px "宋体";
            text-align: center;
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }
        
        #lunbo #btn #leftbtn {
            left: 20px;
        }
        
        #lunbo #btn #rightbtn {
            right: 20px;
        }
        
        #lunbo #btn a:hover {
            background-color: rgba(255, 255, 255, 0.6);
        }
        /* 下标 */
        
        #lunbo #sub {
            position: absolute;
            left: 100px;
            bottom: 50px;
            width: 240px;
        }
        
        #lunbo #sub li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 20px;
            background-color: rgba(255, 255, 255, 0.4);
            font: 12px/20px "微软雅黑";
            text-align: center;
            color: #666;
            cursor: pointer;
        }
        
        #lunbo #sub .current {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <!-- 
       题目要求: 给 part1-模块2-任务1 的轮播图静态页面添加JS事件，让其成功滚动  
    -->
    <!-- 轮播图大结构 -->
    <div id="lunbo">
        <!-- 图片部分 -->
        <ul id="pic">
            <li class="current"><img src="images/lunbo/c1.jpg"></li>
            <li><img src="images/lunbo/c2.jpg"></li>
            <li><img src="images/lunbo/c3.jpg"></li>
            <li><img src="images/lunbo/c4.jpg"></li>
            <li><img src="images/lunbo/c5.jpg"></li>
            <li><img src="images/lunbo/c6.jpg"></li>
        </ul>
        <!-- 按钮 -->
        <div id="btn">
            <a href="javascript:;" id="leftbtn">&lt;</a>
            <a href="javascript:;" id="rightbtn">&gt;</a>
        </div>
        <!-- 小圆点 -->
        <ol id="sub">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
    </div>
    <script src="common.js"></script>
    <script>
        // 获取元素
        var lunbo = my$('lunbo'),
            pic = my$('pic'),
            ulLis = pic.children,
            leftbtn = my$('leftbtn'),
            rightbtn = my$('rightbtn'),
            sub = my$('sub'),
            olLis = sub.children;

        // 定义全局信号量
        var idx = 0;
        //1.右侧按钮点击事件
        addEvent(rightbtn, 'click', rightHandle);
        // 2.左侧点击事件
        addEvent(leftbtn, 'click', function() {
            // 信号量自减
            idx--;
            // 判断idx是否超过最大下标,超过最大下标,则将idx从最后一张切换第一张
            if (idx < 0) {
                idx = ulLis.length - 1
            }
            // 调用change事件函数
            change()

        });
        //3.小正方形下标点击事件
        for (var i = 0; i < olLis.length; i++) {
            addEvent(olLis[i], 'click', function() {
                // 调用change事件函数
                change()
            })
        };
        // 4.自动轮播效果
        var timer;
        timer = setInterval(rightHandle, 2000);

        //5.鼠标移上轮播图
        addEvent(lunbo, 'mouseover', function() {
            clearInterval(timer);
        });
        //6.鼠标离开轮播图
        addEvent(lunbo, 'mouseout', function() {
            timer = setInterval(rightHandle, 3000);
        });

        // 封装右侧事件
        function rightHandle() {
            // 信号量自加
            idx++;
            // 判断idx是否超过最大下标,超过最大下标,则将idx从最后一张切换第一张
            if (idx > ulLis.length - 1) {
                idx = 0
            };
            change();
        }
        //封装change事件,改变current
        function change() {
            //排他思想:a.排除其他,b.保留自己
            for (var i = 0; i < ulLis.length; i++) {
                ulLis[i].className = '';
                olLis[i].className = '';
            }
            ulLis[idx].className = 'current';
            olLis[idx].className = 'current';
        }
    </script>
</body>

</html>